---
layout: single
property_name: text-transform
---

<section id="text-transform" class="property">
  <header class="property-header">
    <nav class="property-links">
        <a class="property-collection" href="{{site.url}}/typography/">
          In collection: <strong>typography</strong>
        </a>
      <a class="property-links-direct" href="{{site.url}}/property/text-transform/" data-property-name="text-transform" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="text-transform">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/text-transform" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#text-transform"><span>#</span>text-transform</a>
    </h2>
    <div class="property-description">
      <p>Defines how the text content should be transformed.</p>

    </div>

  </header>





    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-transform: none;">text-transform: none;</code>
        </p>
        <div class="example-description">
          <p>Removes any text transformation: the text will appear the same as in the HTML code.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div text-transform " id="text-transform-none"><strong>Hello world!</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div>
        </div>
      </aside>
          <style type="text/css">#text-transform-none{ text-transform:none;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-transform: capitalize;">text-transform: capitalize;</code>
        </p>
        <div class="example-description">
          <p>Turns the <strong>first letter</strong> of each word into a <strong>capital</strong> letter.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div text-transform " id="text-transform-capitalize"><strong>Hello world!</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div>
        </div>
      </aside>
          <style type="text/css">#text-transform-capitalize{ text-transform:capitalize;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-transform: uppercase;">text-transform: uppercase;</code>
        </p>
        <div class="example-description">
          <p>Turns <strong>all letters</strong> into <strong>capital</strong> letters.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div text-transform " id="text-transform-uppercase"><strong>Hello world!</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div>
        </div>
      </aside>
          <style type="text/css">#text-transform-uppercase{ text-transform:uppercase;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-transform: lowercase;">text-transform: lowercase;</code>
        </p>
        <div class="example-description">
          <p>Turns <strong>all letters</strong> into <strong>lowercase</strong> letters.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div text-transform " id="text-transform-lowercase"><strong>Hello world!</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</div>
        </div>
      </aside>
          <style type="text/css">#text-transform-lowercase{ text-transform:lowercase;}</style>
    </section>

</section>
